<template>
  <view>
    <view class="banner">
      <uniImage ref="childComponent" class="banner-img" :src="pageData.pic"></uniImage>
      <view class="banner-title">{{ pageData.title }}</view>
    </view>
    <view class="article-meta">
      <!--      <text class="article-author">{{ pageData.author_name }}123</text>-->
      <text class="article-text">发表于</text>
      <text class="article-time">{{ pageData.update }}</text>
    </view>
    <view style=" background-color: #efefef;width: 100%; height:7px;"></view>
    <view class="article-content">
      <view class="graphicsAndText"> 图文详情</view>
      <rich-text :nodes="htmlNodes"></rich-text>
    </view>

  </view>
</template>

<script>
import {getNewsDetail} from "../../models/news";

const DETAIL_PAGE_PATH = '/pages/news/news-detail';
import htmlParser from '@/common/html-parser.js'

function _handleShareChannels(provider) {
  let channels = [];
  for (let i = 0, len = provider.length; i < len; i++) {
    switch (provider[i]) {
      case 'weixin':
        channels.push({
          text: '分享到微信好友',
          id: 'weixin',
          sort: 0
        });
        channels.push({
          text: '分享到微信朋友圈',
          id: 'weixin',
          sort: 1
        });
        break;
      default:
        break;
    }
  }
  channels.sort(function (x, y) {
    return x.sort - y.sort;
  });
  return channels;
}

export default {
  data() {
    return {
      title: '',
      pageData: {},
      htmlNodes: [],
      aaa:''
    }
  },
  onLoad(event) {
    // TODO 后面把参数名替换成 payload
    const payload = event.detailDate || event.payload;
    // 目前在某些平台参数会被主动 decode，暂时这样处理。
    let paramData = {};
    try {
      paramData = JSON.parse(decodeURIComponent(payload));
    } catch (error) {
      paramData = JSON.parse(payload);
    }
    uni.setNavigationBarTitle({
      title: paramData.title
    });
    this.getDetail(paramData);
  },
  /**
   *  点击分享
   */
  onShareAppMessage() {
    return {
      title: this.pageData.title,
      path: DETAIL_PAGE_PATH + '?detailDate=' + encodeURIComponent(JSON.stringify(this.pageData))
    }
  },

  methods: {
    /**
     * 获取页面详细数据
     * @returns {Promise<void>}
     */
    async getDetail(param) {
      try {
        const result = await getNewsDetail({"id": param.id})
        this.pageData = result.data.data;
        var htmlString = result.data.data.contents.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");
        this.htmlNodes = htmlParser(htmlString);

        this.$nextTick(()=>{
          this.$refs.childComponent.getOnLoadImage()
        })
      } catch (e) {
        console.log(e)
      }
    }
  },

  watch: {
    pageData: {
      handler(newVal, oldVal) {
        this.aaa = newVal.pic
        console.log(newVal)
      },
      immediate: true,
      deep: true

    }
  },
  computed:{
    imgsrc(){
      return this.pageData.pic
    }
  }

}
</script>

<style>
.banner {
  height: 360rpx;
  overflow: hidden;
  position: relative;
  background-color: #ccc;
}

.banner-img {
  width: 100%;
  height: 100%;
}

.banner-title {
  max-height: 84rpx;
  overflow: hidden;
  position: absolute;
  left: 30rpx;
  bottom: 30rpx;
  width: 90%;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: white;
  z-index: 11;
  text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
}

.article-meta {
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: gray;
}

.article-text {
  font-size: 26rpx;
  line-height: 50rpx;
  margin: 0 0rpx;
}

.article-author,
.article-time {
  font-size: 30rpx;
}

.article-content {
  padding: 0 30rpx;
  overflow: hidden;
  font-size: 30rpx;
  margin-bottom: 30rpx;
}


.graphicsAndText {
  margin-bottom: 13px;
  margin-top: 10px;
  width: 100%;
  position: relative;
  font-weight: normal;
  /*color: white;*/
  color: #2f2f2f;
  font-size: 18px;
  display: inline-block;
  text-align: center; /* 文字左右居中 */
}

.graphicsAndText::before,
.graphicsAndText::after {
  content: '';
  position: absolute;
  top: 50%; /* 调整线的位置，使其垂直居中 */
  height: 1px; /* 线的高度 */
  background-color: #c5c5c5; /* 线的颜色 */
  width: 40px; /* 计算线的宽度，留出文字的间距 */
  z-index: 1; /* 线的层叠顺序 */
}

.graphicsAndText::before {
  left: 230 upx;
  /*left: 37%;*/
  /*left: 0;*/
  transform: translateX(-100%); /* 将线移动到文字左侧 */
}

.graphicsAndText::after {
  left: 390 upx;
  /*left: 53%;*/
  /*right: 0;*/
  transform: translateX(100%); /* 将线移动到文字右侧 */
}

</style>
